<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
	<title>小魔方</title>
	<style>
		li {
    list-style: none;
}
.will_rotate{
	width: 150px;
    height: 150px;
    margin: 0 auto;
    position: relative;
}
.rotate_parent .tip_front {
    -webkit-transform: translateZ(50px);
    transform: translateZ(50px);
}
.rotate_parent .tip_back {
    -webkit-transform: translateZ(-50px);
    transform: translateZ(-50px);
}
.rotate_parent .tip_right {
    -webkit-transform: rotateY(90deg) translateZ(50px);
    transform: rotateY(90deg) translateZ(50px);
}
.rotate_parent .tip_left {
    -webkit-transform: rotateY(90deg) translateZ(-50px);
    transform: rotateY(90deg) translateZ(-50px);
}
.rotate_parent .tip_top {
    -webkit-transform: rotateX(90deg) translateZ(50px);
    transform: rotateX(90deg) translateZ(50px);
}
.rotate_parent .tip_bottom {
    -webkit-transform: rotateX(90deg) translateZ(-50px);
    transform: rotateX(90deg) translateZ(-50px);
}
.rotate_parent .tip_floor {
    box-shadow: -300px 0 50px rgba(0,0,0,.3);
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    width: 110px;
    height: 110px;
    left: 295px;
    background-color: transparent;
    -webkit-transform: rotateX(90deg) translateZ(-60px);
    transform: rotateX(90deg) translateZ(-60px);
}
.rotate_parent {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    /* margin: -50px 0; */
    -webkit-transform-origin: 50px 50px;
    transform-origin: 50px 50px;
    -webkit-transform: rotateX(-33.5deg) rotateY(45deg);
    transform: rotateX(-33.5deg) rotateY(45deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: willRotate 3s ease-in-out infinite 2s;
    animation: willRotate 3s ease-in-out infinite alternate;
    top: 20%;
    /* left: 50%; */
}

.rotate_parent, .rotate_parent li {
    position: absolute;
    display: block;
}
.rotate_parent .tip_back, .rotate_parent .tip_front, .rotate_parent .tip_left, .rotate_parent .tip_right, .rotate_parent .tip_top {
    background: radial-gradient(transparent 30%,rgba(126,17,91,.2) 100%);
}
.rotate_parent li {
    width: 100px;
    height: 100px;
    transition: -webkit-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
}
.rotate_parent, .rotate_parent li {
    position: absolute;
    display: block;
}
@keyframes willRotate{
	0%{
		transform:rotateX(-33.5deg) rotateY(45deg);
	}
        50%{
		transform:rotateX(-33.5deg) rotateY(180deg);
	}
	100%{
		transform:rotateX(-33.5deg) rotateY(360deg);
	}
}

@-webkit-keyframes willRotate{
	0%{
		transform:rotateX(-33.5deg) rotateY(45deg);
	}
        50%{
		transform:rotateX(-33.5deg) rotateY(180deg);
	}
	100%{
		transform:rotateX(-33.5deg) rotateY(360deg);
	}
}
@-moz-keyframes willRotate{
	0%{
		transform:rotateX(-33.5deg) rotateY(45deg);
	}
        50%{
		transform:rotateX(-33.5deg) rotateY(180deg);
	}
	100%{
		transform:rotateX(-33.5deg) rotateY(360deg);
	}
}
@-o-keyframes willRotate{
	0%{
		transform:rotateX(-33.5deg) rotateY(45deg);
	}
        50%{
		transform:rotateX(-33.5deg) rotateY(180deg);
	}
	100%{
		transform:rotateX(-33.5deg) rotateY(360deg);
	}
}
	</style>
  </head>
	<body style="background: #F7EED6">
    <div id="blog-news">
    <div class="will_rotate">
		<ul class="rotate_parent">
			<li class="tip_front"></li>
			<li class="tip_back"></li>
			<li class="tip_right"></li>
			<li class="tip_left"></li>
			<li class="tip_top"></li>
			<li class="tip_bottom"></li>
			<li class="tip_floor"></li>
		</ul>
   </div>
</div>
  </body>
</html>
